<template>
	<view class="container">
		<top-back-navbar position="fixed" title="钱包-提现" :background="pageColor"
			:color="fontColor"></top-back-navbar>
		<view class="tx-top-group">
			<view class="tx-top-title">提现数量</view>
			<view class="tx-top-button" :style="{backgroundColor:pageColor}" @click="$u.route(`/pages/member/acommsion/projcommision/details?type=jb`)">提现记录</view>
			<view class="tx-top-money">
				<view class="tx-top-yuan">¥</view> 
				<input class="tx-top-money-input" type="number" placeholder-style="color: #bbb;fontSize: 32rpx;" placeholder="请输入提现金额" v-model="money" />
			</view>
			<view class="tx-top-kemoney">可提现数量:<text class="top_right">¥{{credit || '0.00'}}</text></view>
		</view>
		<view class="foot">
			<view class="foot-button" :style="{backgroundColor:pageColor}" @click="showMyBank">我的银行列表</view>
			<view class="same">
				<view class="name">提现方式</view>
				<view class="picker-cell">
					<text class="picker-cell-text">提现到银行卡</text>
					<radio value="" :color="pageColor" checked /></radio>
				</view>
			</view>
			<view class="same">
				<view class="name"><text class="mask-icon">*</text>姓名</view>
				<input class="same-input" placeholder-style="color: #bbb;" type="text" placeholder="请输入姓名" v-model="realname" />
			</view>
			<view class="same" @click="show = true">
				<view class="name"><text class="mask-icon">*</text>银行名称</view>
				<view class="picker-cell" @click="show=true">
					<text class="picker-cell-text" v-if="bankname">{{bankname}}</text>
					<text class="picker-cell-placeholder" v-else>请选择银行名称</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="same">
				<view class="name"><text class="mask-icon">*</text>开户支行</view>
				<input class="same-input" type="text" placeholder-style="color: #bbb;" placeholder="请输入开户支行" v-model="bankbranch" />
			</view>
			<view class="same">
				<view class="name"><text class="mask-icon">*</text>银行卡号</view>
				<input class="same-input" type="number" placeholder-style="color: #bbb;" placeholder="请输入银行卡号" v-model="bankcard" />
			</view>
			<view class="same">
				<view class="name"><text class="mask-icon">*</text>确认卡号</view>
				<input class="same-input" type="number" placeholder-style="color: #bbb;" placeholder="请确认卡号" v-model="bankcard1" />
			</view>
			<button :style="{backgroundColor:pageColor}" style="border-radius: 40rpx;color:#fff;margin:50rpx 0 20rpx 0;"
				class="next" @click="jumpto">申请提现</button>
		</view>
		
		<u-picker mode="selector" v-model="show" :range="pickerBanklist" @confirm="confirmBank"></u-picker>
		<u-picker mode="selector" v-model="pickerShow" :range="pickerMyBanklist" @confirm="confirmMyBank"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageColor:'#001b4d',
				fontColor:'#ffffff',
				pickerShow:false,
				pickerMyBanklist:[],
				myBanklist:[],
				res: {},
				openid: '',
				money: '',
				active: "active",
				checked: 'checked',
				boolean: 'block',
				boolean_wx: 'none',
				boolean_zfb: 'none',
				bankout: 'none',
				pickerBanklist: [],
				// commission_ok:'',
				// 死的？	
				type: 3,
				realname: '',
				bankname: '',
				bankbranch: '',
				bankbranch2: '',
				bankbranch3: '',
				bankcard: '',
				bankcard1: '',
				credit: '',
				multiple: '',
				withdrawcharge: '',
				withdrawmoney: '',
				// 地址
				accountarea: '-请选择地区-',
				cityPickerValueDefault: [0, 0, 0],
				pickerValueDefault: [0],
				pickerValueArray: [],
				// mulLinkageTwoPicker: cityData,
				// province:province,
				// city:city,
				// area:area,
				// asd:asd,
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				datavalue: '',
				payType: 3, // 支付类型
				imagess: [], // 数组类型图片 wx
				imgurl: '', // 字符串类型图片 wx
				imagesss: [], // 数组类型图片 zfb
				imgurls: '', // 字符串类型图片 zfb
				escrow_id: '',
				banklist: [],
				show: false,
				submitType: '',
				pageShowType: 1,
				requestQueyr:''
			};
		},
		onLoad(e) {
			
			this.pageShowType = e.type ? e.type : 1
			if (e.escrow_id) this.escrow_id = e.escrow_id
			if (e.type) this.submitType = e.type;
			if(this.pageShowType==2){
				this.requestQueyr='&type=gf';//国风进入
				this.pageColor='#BA1B21';
				this.fontColor='#000000'
			}else if(this.pageShowType==3){
				this.requestQueyr='&type=fly_egg';//会飞的蛋进入
				this.pageColor='#224f91';
				this.fontColor='#ffffff'
			}
			else if(this.pageShowType==4){
				console.log(this.requestQuey);
				this.requestQueyr='&type=za';//会飞的蛋进入
				this.pageColor='#224f91';
				this.fontColor='#ffffff'
			}
			else if(this.pageShowType==5){
				console.log(this.requestQuey);
				this.requestQueyr='&type=life';//会飞的蛋进入
				this.pageColor='#DB5687';
				this.fontColor='#ffffff'
			}
		},
		onShow: function() {
			// uni.showLoading()
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data
					this.setAjax()
					this.myBankList()
					this.myBankList()
				},
				fail: () => {
					uni.navigateTo({
						url: '../index/index'
					});
				}
			});
		},
		methods: {
			showMyBank(){
				if(this.pickerMyBanklist.length == 0){
					uni.showModal({
					    title: '提示',
					    content: '您还没有添加银行？是否立即添加',
					    success:(res)=>{
					        if (res.confirm) {
					            this.$u.route(`/pages/member/bankcard/bankcard`)
					        }
					    }
					});
					return;
				}
				this.pickerShow=true;
			},
			confirmMyBank(e){
				let index=Array.isArray(e) && e.length>0?e[0]:-1;
				if(index>=0){
					const {realname,bankname,bankbranch,bankid}=this.myBanklist[index];
					this.bankname=this.lodash.isString(bankname)?bankname:'';
					this.bankbranch=this.lodash.isString(bankbranch)?bankbranch:'';
					this.bankcard=this.lodash.isString(bankid)?bankid:'';
					this.bankcard1=this.lodash.isString(bankid)?bankid:'';
				}
			},
			confirmBank(e) {
				let index=Array.isArray(e) && e.length>0?e[0]:-1;
				if(index>=0){
					this.bankname=this.banklist[index].bankname;
				}
			},
			myBankList() {
				uni.request({
					url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=api.my_bank_list&app=1',
					method: 'GET',
					data: {
						openid: this.openid,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						if (res.statusCode == 200) {
						  let list=Array.isArray(res.data.bank_list)?res.data.bank_list:[];
						  this.pickerMyBanklist=list.map(item=>item.bankname)
						  this.myBanklist=list;
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			setAjax() {
				console.log(`${this.$BASE_URL}/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw&app=1${this.requestQueyr}`);
				console.log(this.requestQueyr);
				uni.request({
					url: `${this.$BASE_URL}/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw&app=1${this.requestQueyr}`,
					method: 'POST',
					data: {
						'openid': this.openid,
						escrow_id: this.escrow_id,
					
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						const {realname,bankname,bankbranch,bankcard,credit,banklist}=res.data;
						this.realname=this.lodash.isString(realname)?realname:'';
						this.bankname=this.lodash.isString(bankname)?bankname:'';
						this.bankbranch=this.lodash.isString(bankbranch)?bankbranch:'';
						this.bankcard=this.lodash.isString(bankcard)?bankcard:'';
						this.bankcard1=this.lodash.isString(bankcard)?bankcard:'';
						this.credit=this.lodash.isNumber(Number(credit))?credit:'0.00';
						let list=Array.isArray(banklist)?banklist:[];
						this.pickerBanklist=list.map(item=>item.bankname)
						this.banklist=list;
					},
					fail: () => {},
					complete: () => {}
				});
			},
			chooseImage() {
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let file = res.tempFilePaths
						var images = []
						var img = ''
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
								//仅为示例，非真实的接口地址
								filePath: file[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									_this.res.wechat = true
									// console.log(res)
									images.push(JSON.parse(res.data).url)
									_this.imagess = images
									// _this.avatar = _this.imagess[0]

									img = img + JSON.parse(res.data).url + ';'
									_this.imgurl = img
								}
							});
						}
					}
				});
			},
			select_img() {
				var _this = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						let file = res.tempFilePaths
						var images = []
						var img = ''
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=util.uploader&app=1',
								//仅为示例，非真实的接口地址
								filePath: file[i],
								name: 'file',
								formData: {
									'user': 'test'
								},
								success: (res) => {
									_this.res.alipay = true
									// console.log(res)
									images.push(JSON.parse(res.data).url)
									_this.imagesss = images
									// _this.avatar = _this.imagess[0]

									img = img + JSON.parse(res.data).url + ';'
									_this.imgurls = img
								}
							});
						}
					}
				});
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
				if (type == 1) { // 微信
					this.boolean_wx = 'block'
					this.boolean_zfb = 'none'
					this.boolean = 'none'
				}
				if (type == 2) { // 支付宝
					this.boolean_zfb = 'block'
					this.boolean_wx = 'none'
					this.boolean = 'none'
				}
				if (type == 3) {
					this.boolean = 'block'
					this.boolean_wx = 'none'
					this.boolean_zfb = 'none'
				}
			},
			onCancel(e) {},
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.accountarea = e.label
				console.log(this.accountarea)
				// var pro = e.value[0]
				// var city = e.value[1]
				// var area = e.cityCode
				// this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' +area
				// var a = e.label.split("-")
				// a = a[0] + ' ' + a[1] + ' ' + a[2]
				// this.submit.areas = a
			},
			// onBackPress() {
			//   if (this.$refs.mpvuePicker.showPicker) {
			// 	this.$refs.mpvuePicker.pickerCancel();
			// 	return true;
			//   }
			//   if (this.$refs.mpvueCityPicker.showPicker) {
			// 	this.$refs.mpvueCityPicker.pickerCancel();
			// 	return true;
			//   }
			// },
			// onUnload() {
			// 	if (this.$refs.mpvuePicker.showPicker) {
			// 		this.$refs.mpvuePicker.pickerCancel()
			// 	}
			// 	if (this.$refs.mpvueCityPicker.showPicker) {
			// 		this.$refs.mpvueCityPicker.pickerCancel()
			// 	}
			// },
			check() {
				this.boolean = this.boolean == 'block' ? 'none' : 'block'
			},
			bank_out() {
				this.bankout = 'block'
			},
			bank_miss(index) {
				this.bankname = this.arrs[index]
				this.bankout = 'none'
			},
			tixian_jilu() {
				uni.navigateTo({
					url: '../../coin/log'
				})
			},
			jumpto() {
				if (this.payType == 1) {
					this.wx_tx()
				}
				if (this.payType == 2) {
					this.zfb_tx()
				}
				if (this.payType == 3) {
					this.jump()
				}
			},
			wx_tx() {
				if (!this.res.wechat) {
					uni.showToast({
						title: '请上传微信收款码'
					})
					return
				}
				uni.request({
					url: `${this.$BASE_URL}/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw.submit&app=1${this.requestQueyr}`,
					method: 'POST',
					data: {
						'openid': this.openid,
						'applytype': 1,
						'wechat': this.imgurl,
						'money': this.money,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res)
						if (res.data.status == 0) {
							uni.showModal({
								title: '提示',
								content: res.data.result.message,
								showCancel: false
							})
							return
						}
						if (res.statusCode == 200) {
							uni.showModal({
								content: '提现申请已提交',
								showCancel: false,
								confirmColor: "#DD524D",
								success() {
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/member/acommsion/projcommision/details?type=${this.pageShowType}`
										})
									}, 1200);
								}
							})
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				})
			},
			zfb_tx() {
				if (!this.res.alipay) {
					uni.showToast({
						title: '请上传支付宝收款码'
					})
					return
				}
				uni.request({
					url: `${this.$BASE_URL}/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw.submit&app=1${this.requestQueyr}`,
					method: 'POST',
					data: {
						'openid': this.openid,
						'applytype': 2,
						'alipay': this.imgurls,
						'money': this.money,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(res)
						if (res.data.status == 0) {
							uni.showModal({
								title: '提示',
								content: res.data.result.message,
								showCancel: false
							})
							return
						}
						if (res.statusCode == 200) {
							uni.showModal({
								content: '提现申请已提交',
								showCancel: false,
								confirmColor: "#DD524D",
								success() {
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/member/acommsion/projcommision/details?type=${this.pageShowType}`
										})
									}, 1200);
								}
							})
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				})
			},
			jump() {
				if (this.realname == '') {
					uni.showModal({
						title: '请输入名字',
						showCancel: false
					})
					return
				}
				if (this.bankcard == '') {
					uni.showModal({
						title: '请输入银行卡号',
						showCancel: false
					})
					return
				}
				if (this.bankname == '请选择银行') {
					uni.showModal({
						title: '请选择银行',
						showCancel: false
					})
					return
				}
				if (this.bankcard1 == '') {
					uni.showModal({
						title: '请确认卡号',
						showCancel: false
					})
					return
				}
				let queyr='';
				uni.request({
					url: `${this.$BASE_URL}/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.withdraw.submit&app=1${this.requestQueyr}`,
					method: 'POST',
					data: {
						'openid': this.openid,
						'applytype': 3,
						'realname': this.realname,
						'bankcard': this.bankcard,
						'bankcard1': this.bankcard1,
						'bankname': this.bankname,
						'money': this.money,
						'bankbranch': this.bankbranch,
						'bankbranch1': this.bankbranch2,
						'bankbranch3': this.bankbranch3,
						'accountarea': this.accountarea,
						'escrow_id': this.escrow_id,
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: res => {
						console.log(this.pageShowType);
						if (res.data.status == 0) {
							uni.showModal({
								title: '提示',
								content: res.data.result.message,
								showCancel: false
							})
							return
						}
						if (res.statusCode == 200) {
							uni.showModal({
								content: '提现申请已提交',
								showCancel: false,
								confirmColor: "#DD524D",
								success() {
									setTimeout(() => {
										uni.navigateTo({
											url: `/pages/member/acommsion/projcommision/details?type=jb&=`
										})
									}, 1200);
								}
							})
						}
						uni.hideLoading()
					},
					fail: () => {},
					complete: () => {}
				})

				// 弹窗
				// uni.showModal({
				// title:'提示',
				// content:'确认要提现到银行卡?\r\n姓名:'+this.realname+'\r\n'+this.bankname+'卡号'+this.bankcard + '?',
				// // showCancel: false,
				// confirmColor:"#DD524D",
				// success(res) {
				// 	if (res.confirm) {

				// 		}
				// 	}
				// })

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f2f5fa;
		box-sizing: border-box;
	}

	.container {
		padding: 30rpx;
		height: 100%;
	}
	
	.tx-top-group{
		padding:30rpx;
		border-radius: 10rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
		position: relative;
		overflow: hidden;
		background-color: #fff;
		.tx-top-title{
			height: 60rpx;
			line-height: 60rpx;
			font-weight: bold;
			font-size: 30rpx;
			color:#333;
		}
		.tx-top-button{
			position: absolute;
			top:0;
			right:0;
			border-radius: 0 0 10rpx 10rpx;
			padding:4rpx 30rpx;
			font-size: 30rpx;
			color:#ffffff;
		}
		.tx-top-money{
			display: flex;
			align-items: center;
			padding:20rpx 0;
			border-top:1px solid #eee;
			border-bottom:1px solid #eee;
			margin-top: 10rpx;
		}
		.tx-top-yuan{
			font-size: 40rpx;
			font-weight: bold;
			color:#888;
			padding-right:30rpx;
		}
		.tx-top-money-input{
			height: 70rpx;
			line-height: 70rpx;
			font-size: 32rpx;
			color:#333;
			flex:1;
		}
		.tx-top-kemoney{
			padding-left:60rpx;
			font-size: 28rpx;
			color:#888;
			margin-top: 10rpx;
		}
		.top_right{
			color:#333;
			font-weight: bold;
			margin-left:10rpx;
			font-size: 32rpx;
		}
	}
	.foot{
		padding:80rpx 30rpx 30rpx 30rpx;
		border-radius: 10rpx;
		box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
		margin-top: 30rpx;
		background-color: #fff;
		position: relative;
		.foot-button{
			position: absolute;
			top:0;
			right:0;
			border-radius: 0 0 10rpx 10rpx;
			padding:4rpx 30rpx;
			font-size: 30rpx;
			color:#ffffff;
		}
	}

	.same {
		border-bottom: 1upx solid #eee;
		display: flex;
		align-items: center;
		.name{
			width: 200rpx;
			font-size: 30rpx;
			color:#333;
			height: 90rpx;
			line-height: 90rpx;
			padding:0 30rpx 0 20rpx;
			display: flex;
			align-items: center;
			.mask-icon{
				font-size: 26rpx;
				color:#BA1B21;
				padding-right:8rpx;
			}
		}
		.same-input{
			flex:1;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 30rpx;
		}
		.picker-cell{
			flex:1;
			display: flex;
			height: 90rpx;
			align-items: center;
			justify-content: space-between;
			text{
				font-size: 30rpx;
			}
			.picker-cell-text{
				color: #333;
			}
		}
	}
</style>
